<template>
    <div class="girls">
        <div class="girls_list">
            <ul>
                <li v-for="(item, index) in infolist" :key="index" @click="goCategory">
                    {{ item.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { bookStoreInfo } from "@/api/found";
export default {
    data() {
        return {
            infolist: [],
        };
    },
    methods: {
        getStoreInfo() {
            let data = {
                type: this.$route.query.type,
                bar: this.$route.query.bar,
                uuid: this.$route.query.uuid,
            };
            bookStoreInfo({ data }).then((res) => {
                console.log(res);
                let result = res.list[0].labels;
                this.infolist = result;
                console.log(this.infolist);
            });
        },
        goCategory() {
            this.$router.push({
                path: "/categorydetails",
                query: {
                    type: this.$route.query.type,
                    bar: this.$route.query.bar,
                    uuid: this.$route.query.uuid,
                },
            });
        },
    },
    created() {
        this.getStoreInfo();
    },
};
</script>

<style lang="scss" scoped>
.girls {
    width: 100%;
    .girls_list {
        padding: 15px 0;
    }

    ul {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 105px);
        grid-template-rows: repeat(auto-fill, 50px);
        row-gap: 15px;
        column-gap: 15px;
    }
    a,
    li {
        // border: 1px solid #000;
        // height: 50px;
        line-height: 50px;
        text-align: center;
        background: #a9abb8;
        font-size: 14px;
        color: #fff;
        border-radius: 3px;
    }
}
</style>
